<template>
	<view>
		<view class="flexright mainpadding" style="padding-top: 60rpx;">
			<image src="@/static/image/system/rightheaderimg.png" class="rightheaderimg" mode="" @click="changeFn()">
			</image>
		</view>
		<u-popup :show="laungeShow" @close="laungeShow=false" round="10" mode="center">
			<view class="mainpadding" style="min-width: 600rpx;">
				<view class="textcenter xiaohei margin_top bigtext">{{$t('header.qhyy')}}</view>
				<view class="flexbetween margin_top5" v-for="item in launge" :key="item.id"
					@click="changelaunge(item)">
					<view class="titletext  xiaohei">{{item.text}}</view>
					<u-icon name="checkbox-mark" color="#ffffff" size="16" v-if="systemlaunge!=item.code"></u-icon>
					<u-icon name="checkbox-mark" color="#9dccff" size="16" v-if="systemlaunge==item.code"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name: "headertop",
		data() {
			return {
				laungeShow: false,
				launge: [{
						text: this.$t('locale.zh'),
						code: 'zh-Hans',
						id:1,
					}, {
						text: this.$t('locale.en'),
						code: 'en',
						id:2,
					}

				],
				systemlaunge: "",
				applicationLocale:""
			};
		},
		created() {
			if (uni.getStorageSync("UNI_LOCALE")) {
				this.systemlaunge = uni.getStorageSync("UNI_LOCALE")
			}
			this.applicationLocale = uni.getLocale();
			console.log(this.applicationLocale);
			uni.onLocaleChange((e) => {
			  this.applicationLocale = e.locale;
			})
		},
		methods: {
			changeFn(){
				this.laungeShow = true
			},
			changelaunge(item) {
				let that = this
				uni.setLocale(item.code);
				that.$i18n.locale = item.code;
				let arr = [{
						text: this.$t('locale.zh'),
						code: 'zh'
					}, {
						text: this.$t('locale.en'),
						code: 'en'
					}
				]
				this.launge = JSON.parse(JSON.stringify(arr))
				this.systemlaunge = item.code
				uni.setStorageSync("UNI_LOCALE",item.code)
				this.laungeShow = false
			}
		}
	}
</script>

<style>
.rightheaderimg{
  	  width: 40rpx;
  	  height: 40rpx;
  }
</style>